<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>小康100</title>

		<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 100%;
				height: 100%;
			}
			/*手机*/
			
			@media screen and (max-width:600px) {
				.banner {
					width: 100%;
					height: 20rem;
				}
				.banner1 {
					height: 6rem;
					margin-bottom: 2rem;
				}
				.coupon-bg1 {
					height: 65px;
				}
				.coupon-bg2 {
					height: 65px;
				}
				.coupon-bg3 {
					height: 65px;
				}
			}
			/*平板*/
			
			@media screen and (min-width:600px) and (max-width:960px) {
				.banner {
					width: 100%;
					height: 20rem;
				}
			}
			/*PC*/
			
			@media screen and (min-width:960px) {
				.banner {
					width: 100%;
					height: 700px;
				}
				.area {
					border: 2px solid #FFFFFF;
					border-radius: 5px;
				}
				.clear {
					margin: 0;
					padding: 0;
				}
				.banner1 {
					margin-bottom: 2rem;
				}
				.coupon-bg1 {
					height: 130px;
				}
				.coupon-bg2 {
					height: 130px;
				}
				.coupon-bg3 {
					height: 130px;
				}
			}
			/************公共***************/
			
			.logo {
				width: 5%;
				position: absolute;
				top: 0;
				left: 24.5%;
			}
			
			.ac-bg {
				background: url(image/bg.jpg);
				background-size: 100% 100%;
				height: auto;
				padding-bottom: 8rem;
			}
			/**********优惠券**********/
			
			.coupon {
				height: auto;
				color: #FFFFFF;
			}
			
			.coupon-bg1 {
				background: url(image/manjian_01.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.coupon-bg2 {
				background: url(image/manjian_02.png) no-repeat;
				background-size: 100% 100%;
			}
			
			.coupon-bg3 {
				background: url(image/manjian_03.png) no-repeat;
				background-size: 100% 100%;
			}
			/**********专区**************/
			
			.pr {
				border-bottom: 2px solid #fdf6b0;
			}
			
			.area-head {
				margin-top: 90px;
				margin-bottom: 20px;
			}
		</style>

	</head>

	<body>
		<!--banner开始-->
		<div class="container-fluid">
			<div class="banner">
				<img src="image/banner.jpg" />
			</div>
			<div class="logo">
				<img src="image/logo.jpg" />
			</div>
		</div>
		<!--banner结束-->

		<!--主体开始-->
		<div class="container-fluid ac-bg" style="margin-top: -2rem;">
			<div class="container">

				<div class="row">
					<div class="col-md-6 col-md-offset-3 col-xs-12">
						<div class="row">
							<div class="col-md-10 col-md-offset-1 banner1 col-xs-6 col-xs-offset-3">
								<img src="image/manjian.png" />
							</div>
						</div>
					</div>
				</div>

				<!--购物券开始-->
				<div class="row">
					<div class="col-md-10 col-md-offset-1 col-xs-12">

						<div class="row coupon">
							<div class="col-md-4 coupon-bg1 col-xs-4">

								<!--<button class="coupon-btn">优惠  点击领取</button>-->
							</div>
							<div class="col-md-4 coupon-bg2 col-xs-4">
								<!--<button class="coupon-btn">优惠  点击领取</button>-->
							</div>
							<div class="col-md-4 coupon-bg3 col-xs-4">
								<!--<button class="coupon-btn">优惠  点击领取</button>-->
							</div>
						</div>

					</div>
				</div>
				<!--购物券结束-->

				<!--专区开始-->
				<div class="row area-head">
					<div class="col-md-8 col-md-offset-2 col-xs-12">
						<img src="image/new-goods.png" />
					</div>
				</div>
				<div class="row area">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-10 col-md-offset-1 pr">
								<img src="image/shop1.png" />
							</div>
						</div>
						<div class="row">
							<div class="col-md-5 col-md-offset-1 col-xs-6">
								<img src="image/shop3.png" />
							</div>
							<div class="col-md-5 col-xs-6">
								<img src="image/shop3.png" />
							</div>
						</div>
					</div>
				</div>
				<!--专区结束-->

				<!--专区开始-->
				<div class="row area-head">
					<div class="col-md-8 col-md-offset-2">
						<img src="image/hot-goods.png" />
					</div>
				</div>
				<div class="row area">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-10 col-md-offset-1 pr">
								<img src="image/shop2.png" />
							</div>
						</div>
						<div class="row">
							<div class="col-md-10 col-md-offset-1 pr">
								<img src="image/shop5.png" />
							</div>
						</div>
						<div class="row">
							<div class="col-md-5 col-md-offset-1 pr col-md-5 col-xs-6">
								<img src="image/shop3.png" />
							</div>
							<div class="col-md-5 pr col-md-5 col-xs-6">
								<img src="image/shop3.png" />
							</div>
						</div>
						<div class="row">
							<div class="col-md-5 col-md-offset-1 col-md-5 col-xs-6">
								<img src="image/shop3.png" />
							</div>
							<div class="col-md-5 col-md-5 col-xs-6">
								<img src="image/shop3.png" />
							</div>
						</div>
					</div>
				</div>
				<!--专区结束-->
			</div>
		</div>
		<!--主体结束-->

	</body>

</html>